import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as CounterActions from '../store/actions/counter.actions'
/**
 * connect
 * 帮助我们订阅 Store 当 Store 中的状态发生更改时 会帮助我们重新渲染组件
 * 可以让我们获取 Store 中的状态 通过 props 数进行映射给组件
 * 可以让我们获取到 dispatch 方法
 */

function Counter({ count, increment_async, decrement }) {
  return (
    <div>
      <button onClick={() => increment_async(5)}> + </button>
      <span>{count}</span>
      <button onClick={() => decrement(1)}> - </button>
    </div>
  )
}

const mapStateToProps = state => ({
  count: state.counter.count
})

const mapDispatchToProps = dispatch => bindActionCreators(CounterActions, dispatch)

export default connect(mapStateToProps, mapDispatchToProps)(Counter)
